<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Slider component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="../vendor/holder.js"></script>
        <script src="js/docs.js"></script>
        <script src="../src/js/components/slider.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="core.html">Core</a></li>
                    <li class="uk-active"><a href="components.html">Components</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">Layout</li>
                            <li><a href="grid-js.html">Dynamic Grid</a></li>
                            <li><a href="grid-parallax.html">Parallax Grid</a></li>
                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="dotnav.html">Dotnav</a></li>
                            <li><a href="slidenav.html">Slidenav</a></li>
                            <li><a href="pagination-js.html">Dynamic Pagination</a></li>
                            <li class="uk-nav-header">Common</li>
                            <li><a href="form-advanced.html">Form advanced</a></li>
                            <li><a href="form-file.html">Form file</a></li>
                            <li><a href="form-password.html">Form password</a></li>
                            <li><a href="form-select.html">Form select</a></li>
                            <li><a href="placeholder.html">Placeholder</a></li>
                            <li><a href="progress.html">Progress</a></li>
                            <li class="uk-nav-header">JavaScript</li>
                            <li><a href="lightbox.html">Lightbox</a></li>
                            <li><a href="autocomplete.html">Autocomplete</a></li>
                            <li><a href="datepicker.html">Datepicker</a></li>
                            <li><a href="htmleditor.html">HTML editor</a></li>
                            <li class="uk-active"><a href="slider.html">Slider</a></li>
                            <li><a href="slideset.html">Slideset</a></li>
                            <li><a href="slideshow.html">Slideshow</a></li>
                            <li><a href="parallax.html">Parallax</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="notify.html">Notify</a></li>
                            <li><a href="search.html">Search</a></li>
                            <li><a href="nestable.html">Nestable</a></li>
                            <li><a href="sortable.html">Sortable</a></li>
                            <li><a href="sticky.html">Sticky</a></li>
                            <li><a href="timepicker.html">Timepicker</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="upload.html">Upload</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>Slider</h1>

                            <p class="uk-article-lead">Create a list of items to use as a responsive carousel slider</p>

                            <p>The slider is a responsive display of elements that can be scrolled through using the mouse or touch gestures.</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">Usage</a></h2>

                            <p>To apply the Slider component, add the <code>data-uk-slider</code> attribute to a container element around a <code>.uk-slider-container</code> element. Add a list of items and assign the <code>.uk-slider</code> class to the list. Use the <code>.uk-width-*</code> and <code>.uk-grid-width-*</code> classes to determine how many elements are visible at once.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slider>

                                <div class="uk-slider-container">
                                    <ul class="uk-slider uk-grid-width-medium-1-4">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:9/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:10/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:11/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:12/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                </div>

                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slider&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider uk-grid-width-medium-1-4&quot;&gt;
            &lt;li&gt;...&lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="navigation"><a href="#navigation" class="uk-link-reset">Navigation</a></h2>

                            <p>The slider itself can be scrolled with click and drag of the mouse or swiping on touch devices. It is a good idea to also add a clickable slidenav navigation. The slidenav adds arrows buttons that appear when you hover the slider.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

<pre><code>&lt;div class=&quot;uk-slidenav-position&quot; data-uk-slider&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider uk-grid-width-medium-1-4&quot;&gt;
            &lt;li&gt;...&lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;

    &lt;a href=&quot;&quot; class=&quot;uk-slidenav uk-slidenav-contrast uk-slidenav-previous&quot; data-uk-slider-item=&quot;previous&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;&quot; class=&quot;uk-slidenav uk-slidenav-contrast uk-slidenav-next&quot; data-uk-slider-item=&quot;next&quot;&gt;&lt;/a&gt;

&lt;/div&gt;</code></pre>


                            <hr class="uk-article-divider">

                            <h2 id="center"><a href="#center" class="uk-link-reset">Center Mode</a></h2>

                            <p>By default, elements of the slider always align to the left edge of the slider container. If you want to center the elements instead, set the <code>center</code> attribute to <code>true</code>.</p>

                            <p><span class="uk-badge">Note</span> The center list element always has the class <code>.uk-active</code> added. You can make use of that if you want to highlight the center element.</p>


                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slider="{center:true}">

                                <div class="uk-slider-container">
                                    <ul class="uk-slider uk-grid-width-medium-1-4">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:9/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:10/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:11/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:12/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                </div>

                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slider=&quot;{center:true}&quot;&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider uk-grid-width-medium-1-4&quot;&gt;
            &lt;li&gt;...&lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;


&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="scrolling"><a href="#scrolling" class="uk-link-reset">Disable Infinite Scrolling</a></h2>

                            <p>By default, the slider loops through all items. To disable that behaviour, set the <code>infinite</code> parameter to <code>false</code>. This works both with center mode enabled and disabled.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slider="{infinite: false}">

                                <div class="uk-slider-container">
                                    <ul class="uk-slider uk-grid-width-medium-1-4">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:9/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:10/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:11/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:12/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                </div>

                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slider=&quot;{infinite: false}&quot;&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider uk-grid-width-medium-1-4&quot;&gt;
            &lt;li&gt;...&lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="gutter"><a href="#gutter" class="uk-link-reset">Item gutter</a></h2>

                            <p>If you want some spacing between your elements, add the <code>.uk-grid</code> class to the slider container. The elements will then be spaced according to the grid gutter.</p>

                            <p><span class="uk-badge">Note</span> You can use the modifiers <code>uk-grid-medium</code> and <code>uk-grid-small</code> to change the gutter.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-slidenav-position" data-uk-slider="{infinite: false}">

                                <div class="uk-slider-container">
                                    <ul class="uk-slider uk-grid uk-grid-width-medium-1-4">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                </div>

                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="widths"><a href="#widths" class="uk-link-reset">Item width</a></h2>

                            <p>To set the widths of your elements, use the width classes from the UIkit grid. Either use the <code>uk-grid-width-*</code> classes on the slider container or use individual widths per list item using the <code>uk-width-*</code> classes.</p>

                            <h3 class="tm-article-subtitle">Example: Individual widths</h3>

                            <div class="uk-slidenav-position" data-uk-slider>

                                <div class="uk-slider-container">
                                    <ul class="uk-slider">
                                        <li class="uk-width-1-3"><img src="holder.js/400x200/sky/auto/text:1/size:100" width="400" height="200" alt=""></li>
                                        <li class="uk-width-1-5"><img src="holder.js/240x200/vine/auto/text:2/size:100" width="240" height="200" alt=""></li>
                                        <li class="uk-width-2-5"><img src="holder.js/480x200/lava/auto/text:3/size:100" width="480" height="200" alt=""></li>
                                        <li class="uk-width-1-4"><img src="holder.js/300x200/sky/auto/text:4/size:100" width="300" height="200" alt=""></li>
                                        <li class="uk-width-1-3"><img src="holder.js/400x200/vine/auto/text:5/size:100" width="400" height="200" alt=""></li>
                                        <li class="uk-width-1-5"><img src="holder.js/240x200/lava/auto/text:6/size:100" width="240" height="200" alt=""></li>
                                    </ul>
                                </div>

                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slider&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider&quot;&gt;
            &lt;li class=&quot;uk-width-1-3&quot;&gt;...&lt;/li&gt;
            &lt;li class=&quot;uk-width-1-5&quot;&gt;...&lt;/li&gt;
            &lt;li class=&quot;uk-width-2-5&quot;&gt;...&lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="responsive"><a href="#responsive" class="uk-link-reset">Responsive behaviour</a></h2>

                            <p>To adapt to different viewports, you can use the responsive grid classes. In the following example, the slider displays four items on large viewports, three on medium and just one item on small ones.</p>

                            <h3 class="tm-article-subtitle">Example: Responsive widths</h3>

                            <div class="uk-slidenav-position" data-uk-slider>

                                <div class="uk-slider-container">
                                    <ul class="uk-slider uk-grid-width-large-1-4 uk-grid-width-medium-1-3">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/lava/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/vine/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                </div>

                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
                                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slider&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider uk-grid-width-medium-1-3 uk-grid-width-large-1-4&quot;&gt;
            &lt;li&gt;...&lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>
                            <hr class="uk-article-divider">

                            <h2 id="fullscreen"><a href="#fullscreen" class="uk-link-reset">Fullscreen mode</a></h2>

                            <p>The slider includes a fullscreen mode where each slide stretches to 100% the height of the viewport.</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slider&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider uk-slider-fullscreen&quot;&gt;
            &lt;li&gt;...&lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>


                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript options</a></h2>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Option</th>
                                            <th>Possible value</th>
                                            <th>Default</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>center</code></td>
                                            <td>boolean</td>
                                            <td>false</td>
                                            <td>Center items mode</td>
                                        </tr>
                                        <tr>
                                            <td><code>threshold</code></td>
                                            <td>integer</td>
                                            <td>10</td>
                                            <td>Mouse movement threshold in pixel until trigger element dragging</td>
                                        </tr>
                                        <tr>
                                            <td><code>infinite</code></td>
                                            <td>boolean</td>
                                            <td>true</td>
                                            <td>Infinite scrolling</td>
                                        </tr>
                                        <tr>
                                            <td><code>activecls</code></td>
                                            <td>string</td>
                                            <td>uk-active</td>
                                            <td>Class added on active item in center mode</td>
                                        </tr>
                                        <tr>
                                            <td><code>autoplay</code></td>
                                            <td>boolean</td>
                                            <td>false</td>
                                            <td>Defines whether or not the slider items should switch automatically</td>
                                        </tr>
                                        </tr>
                                        <tr>
                                            <td><code>pauseOnHover</code></td>
                                            <td>boolean</td>
                                            <td>true</td>
                                            <td>Pause autoplay when hovering a slider</td>
                                        </tr>
                                        <tr>
                                            <td><code>autoplayInterval</code></td>
                                            <td>integer</td>
                                            <td>7000</td>
                                            <td>Defines the timespan between switching slider items</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Init element manually</h3>

                            <pre><code>var slider = UIkit.slider(element, { /* options */ });</code></pre>

                            <h3>Events</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Parameter</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>focusitem.uk.slider</code></td>
                                            <td>event, index, item</td>
                                            <td>On item focus</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">Documentation</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">Get started</a></li>
                            <li><a href="documentation_how-to-customize.html">How to customize</a></li>
                            <li><a href="documentation_layouts.html">Layout examples</a></li>
                            <li><a href="core.html">Core</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="documentation_project-structure.html">Project structure</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass files</a></li>
                            <li><a href="documentation_create-a-theme.html">Create a theme</a></li>
                            <li><a href="documentation_create-a-style.html">Create a style</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">Custom prefix</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> Defaults</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">Base</a></li>
                            <li><a href="print.html">Print</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="panel.html">Panel</a></li>
                            <li><a href="block.html">Block</a></li>
                            <li><a href="article.html">Article</a></li>
                            <li><a href="comment.html">Comment</a></li>
                            <li><a href="utility.html">Utility</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">Cover</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">Nav</a></li>
                            <li><a href="navbar.html">Navbar</a></li>
                            <li><a href="subnav.html">Subnav</a></li>
                            <li><a href="breadcrumb.html">Breadcrumb</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="thumbnav.html">Thumbnav</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> Elements</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">List</a></li>
                            <li><a href="description-list.html">Description list</a></li>
                            <li><a href="table.html">Table</a></li>
                            <li><a href="form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">Button</a></li>
                            <li><a href="icon.html">Icon</a></li>
                            <li><a href="close.html">Close</a></li>
                            <li><a href="badge.html">Badge</a></li>
                            <li><a href="alert.html">Alert</a></li>
                            <li><a href="thumbnail.html">Thumbnail</a></li>
                            <li><a href="overlay.html">Overlay</a></li>
                            <li><a href="text.html">Text</a></li>
                            <li><a href="column.html">Column</a></li>
                            <li><a href="animation.html">Animation</a></li>
                            <li><a href="contrast.html">Contrast</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="offcanvas.html">Off-canvas</a></li>
                            <li><a href="switcher.html">Switcher</a></li>
                            <li><a href="toggle.html">Toggle</a></li>
                            <li><a href="scrollspy.html">Scrollspy</a></li>
                            <li><a href="smooth-scroll.html">Smooth scroll</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Components</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">Dynamic Grid</a></li>
                            <li><a href="grid-parallax.html">Parallax Grid</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">Dotnav</a></li>
                            <li><a href="slidenav.html">Slidenav</a></li>
                            <li><a href="pagination-js.html">Dynamic Pagination</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">Form advanced</a></li>
                            <li><a href="form-file.html">Form file</a></li>
                            <li><a href="form-password.html">Form password</a></li>
                            <li><a href="form-select.html">Form select</a></li>
                            <li><a href="placeholder.html">Placeholder</a></li>
                            <li><a href="progress.html">Progress</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent uk-active"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">Lightbox</a></li>
                            <li><a href="autocomplete.html">Autocomplete</a></li>
                            <li><a href="datepicker.html">Datepicker</a></li>
                            <li><a href="htmleditor.html">HTML editor</a></li>
                            <li><a href="slider.html">Slider</a></li>
                            <li><a href="slideset.html">Slideset</a></li>
                            <li><a href="slideshow.html">Slideshow</a></li>
                            <li><a href="parallax.html">Parallax</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="notify.html">Notify</a></li>
                            <li><a href="search.html">Search</a></li>
                            <li><a href="nestable.html">Nestable</a></li>
                            <li><a href="sortable.html">Sortable</a></li>
                            <li><a href="sticky.html">Sticky</a></li>
                            <li><a href="timepicker.html">Timepicker</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="upload.html">Upload</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
